<!--登录之前 用户第一次通过关注公众号进入系统-->

<script setup lang="ts">
import { ref } from 'vue'
//@ts-ignore
import { getUserWechatAccounts, getWechatAccounts } from '@/api/wechat/app'
import { addWechatUser, updateUserWechatAccounts } from '@/api/wechat/user'
import { Wechat_info } from '@/constant/wechat_info.js'
// @ts-ignore
import { cookieUtil } from '@/utils/cookie'
import { showFailToast, showSuccessToast } from 'vant'
import { useRouter } from 'vue-router'
import type { UserWechatAccounts } from '@/api/types'
import { getUserInfo } from '@/api/wechat/auth'

const router = useRouter()

const loginUserInfo = ref({
  userName: '',
  tel: '',
  openid: '',
  accountId: '',
  nickname: '',
})
// 先拿token 鉴权一下是否过期
const user_token = cookieUtil.get('user_token')

if (!user_token) {
  router.push('/login/once')
}

// 提交登录
const handleSubmit = () => {
  // 先获取本地存储的信息
  loginUserInfo.value.openid = cookieUtil.get('open_id')
  loginUserInfo.value.nickname = cookieUtil.get('user_nickname')

  // 这里需要先用app_id查一次数据库拿到accountId
  getWechatAccounts(Wechat_info.appId)
    .then((res) => {
      if (res.data == null) {
        showFailToast('未找到相关公众号信息!')
      } else {
        let user_wechat_account: UserWechatAccounts = {
          accountId: res.data,
          tel: loginUserInfo.value.tel,
          userName: loginUserInfo.value.userName,
          openid: loginUserInfo.value.openid,
          nickname: loginUserInfo.value.nickname,
        }
        addWechatUser(user_wechat_account).then((res: any) => {
          if (res.code == 200) {
            showSuccessToast('绑定成功,正在为您跳转页面...')
            router.push('/')
          }
        })
      }
    })
    .catch((err) => {
      showFailToast('错误:' + err)
    })
}
</script>
<template>
  <div>
    <div class="before-login">
      <!--      登录表单-->
      <div class="before-login-form">
        <!--        信息填写-->
        <div class="before-login-form-information">
          <div class="before-login-form-information-input">
            <!--            姓名-->
            <van-field
              clearable
              v-model="loginUserInfo.userName"
              placeholder="请输入姓名"
              size="large"
              class="before-login-form-information-input-item"
            >
              <template #left-icon>
                <van-icon name="manager" class="icon-user" />
              </template>
            </van-field>
            <!--            手机号-->
            <van-field
              clearable
              v-model="loginUserInfo.tel"
              placeholder="请输入手机号"
              size="large"
              class="before-login-form-information-input-item"
            >
              <template #left-icon>
                <van-icon name="phone" class="icon-phone" />
              </template>
            </van-field>
          </div>
          <div class="user-lines"></div>
        </div>
        <!--        点击提交按钮-->
        <div class="before-login-form-submit">
          <van-button
            round
            type="success"
            class="before-login-form-submit-button"
            @click="handleSubmit"
            >提交
          </van-button>
        </div>
      </div>
    </div>
  </div>
</template>

<style scoped>
.icon-user {
  color: #62d388;
  font-size: 1.4rem;
  margin-right: 1rem;
  margin-left: 1rem;
}

.icon-phone {
  color: #14d2aa;
  font-size: 1.4rem;
  margin-right: 1rem;
  margin-left: 1rem;
}

.before-login {
  margin: 0 auto;
  width: 100%;
  height: 15rem;
}

.user-lines {
  margin: 0 auto;
  width: 100%;
  background-color: #07ceb4;
  height: 0.4rem;
  border-radius: 2px 2px 10px 10px;
}

.before-login-form {
  margin: 0 auto;
  border-radius: 2px 2px 10px 10px;
  width: 90%;
  height: 100%;
}

.before-login-form-information {
  height: 60%;
  box-shadow: #7eecab 2px 2px 18px 0px;
}

.before-login-form-information-input {
  height: 100%;
}

.before-login-form-information-input-item {
  font-weight: 550;
  height: 4.2rem;
  line-height: 3rem;
  font-size: 1rem;
  color: #adadad;
}

.before-login-form-submit {
  margin-top: 0.3rem;
  height: 40%;
  display: flex;
  justify-content: center;
  align-items: center;
}

.before-login-form-submit-button {
  font-size: 16px;
  width: 100%;
  height: 3.1rem;
  background-color: #01d2b5;
}
</style>
